
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>首页二</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/public.css" media="all">
    <style>
      .layui-card {
        border: 1px solid #f2f2f2;
        border-radius: 5px;
      }
      
      .icon {
        margin-right: 10px;
        color: #1aa094;
      }
      
      .icon-cray {
        color: #ffb800 !important;
      }
      
      .icon-blue {
        color: #1e9fff !important;
      }
      
      .icon-tip {
        color: #ff5722 !important;
      }
      
      .layuimini-qiuck-module {
        text-align: center;
        margin-top: 10px
      }
      
      .layuimini-qiuck-module a i {
        display: inline-block;
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: center;
        border-radius: 2px;
        font-size: 30px;
        background-color: #F8F8F8;
        color: #333;
        transition: all .3s;
        -webkit-transition: all .3s;
      }
      
      .layuimini-qiuck-module a cite {
        position: relative;
        top: 2px;
        display: block;
        color: #666;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 14px;
      }
      
      .welcome-module {
        width: 100%;
        height: 210px;
      }
      
      .panel {
        background-color: #fff;
        border: 1px solid transparent;
        border-radius: 3px;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
      }
      
      .panel-body {
        padding: 10px
      }
      
      .panel-title {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 12px;
        color: inherit
      }
      
      .label {
        display: inline;
        padding: .2em .6em .3em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: .25em;
        margin-top: .3em;
      }
      
      .layui-red {
        color: red
      }
      
      .main_btn > p {
        height: 40px;
      }
      
      .layui-bg-number {
        background-color: #F8F8F8;
      }
      
      .layuimini-notice:hover {
        background: #f6f6f6;
      }
      
      .layuimini-notice {
        padding: 7px 16px;
        clear: both;
        font-size: 12px !important;
        cursor: pointer;
        position: relative;
        transition: background 0.2s ease-in-out;
      }
      
      .layuimini-notice-title, .layuimini-notice-label {
        padding-right: 70px !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        white-space: nowrap !important;
      }
      
      .layuimini-notice-title {
        line-height: 28px;
        font-size: 14px;
      }
      
      .layuimini-notice-extra {
        position: absolute;
        top: 50%;
        margin-top: -8px;
        right: 16px;
        display: inline-block;
        height: 16px;
        color: #999;
      }
    </style>
  </head>
  <body>
    <div class="layuimini-container">
      <div class="layuimini-main">
        <div class="layui-row layui-col-space15">
          <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">
              <div class="layui-col-md12">
                <div class="layui-card">
                  <div class="layui-card-header"><i class="fa fa-warning icon"></i>数据统计</div>
                  <div class="layui-card-body">
                    <div class="welcome-module">
                      <div class="layui-row layui-col-space10">
                        <div class="layui-col-xs6">
                          <div class="panel layui-bg-number">
                            <div class="panel-body">
                              <div class="panel-title">
                                <span class="label pull-right layui-bg-blue">实时</span>
                                <h5>学院统计</h5>
                              </div>
                              <div class="panel-content">
                                <h1 class="no-margins" id="collogetotal">0</h1>
                                <small>当前学院总记录数</small>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="layui-col-xs6">
                          <div class="panel layui-bg-number">
                            <div class="panel-body">
                              <div class="panel-title">
                                <span class="label pull-right layui-bg-cyan">实时</span>
                                <h5>专业统计</h5>
                              </div>
                              <div class="panel-content">
                                <h1 class="no-margins" id="mjtotal">0</h1>
                                <small>当前专业总记录数</small>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="layui-col-xs6">
                          <div class="panel layui-bg-number">
                            <div class="panel-body">
                              <div class="panel-title">
                                <span class="label pull-right layui-bg-orange">实时</span>
                                <h5>教师统计</h5>
                              </div>
                              <div class="panel-content">
                                <h1 class="no-margins" id="teachertotal">0</h1>
                                <small>当前教师总记录数</small>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="layui-col-xs6">
                          <div class="panel layui-bg-number">
                            <div class="panel-body">
                              <div class="panel-title">
                                <span class="label pull-right layui-bg-green">实时</span>
                                <h5>学生统计</h5>
                              </div>
                              <div class="panel-content">
                                <h1 class="no-margins" id="stutotal">0</h1>
                                <small>当前学生总记录数</small>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-col-md12">
                <div class="layui-card">
                  <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>报表统计</div>
                  <div class="layui-card-body">
                    <div id="echarts-records" style="width: 100%;min-height:500px"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="${pageContext.request.contextPath}/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/http.js" charset="utf-8"></script>
    <script>
        layui.use(['layer', 'miniTab', 'echarts'], function () {
            var $ = layui.jquery,
                layer = layui.layer,
                miniTab = layui.miniTab,
                echarts = layui.echarts;

            miniTab.listen();
            //数据统计请求
            http.post("/login.do?method=getCount", null, function (res) {
                console.log(res)
                if (res && res.code == 200) {
                    $("#collogetotal").text(res.data.collogetotal)
                    $("#mjtotal").text(res.data.mjtotal)
                    $("#stutotal").text(res.data.stutotal)
                    $("#teachertotal").text(res.data.teachertotal)
                }
            })

            /**
             * 报表功能
             */
            var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
            var optionRecords = {
                title: {
                    text: '专业人数统计'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: []
                },
                series: [
                    {
                        name: '人数',
                        type: 'bar',
                        data: []
                    }
                ]
            };
            //报表请求
            http.post("/login.do?method=getMajorTotal", null, function (res) {
                console.log(res)
                if (res && res.code == 200) {
                    optionRecords.yAxis.data = res.data.majorList
                    optionRecords.series[0].data = res.data.countList
                    echartsRecords.setOption(optionRecords);
                }
            })
            // echarts 窗口缩放自适应
            window.onresize = function () {
                echartsRecords.resize();
            }

        });
    </script>
  </body>
</html>

